<template>
  <div :class="{'page-view': isShowCrop}">
    <div v-if="!isShowCrop">
      <router-link
        class="header"
        tag="div"
        :to="{name: 'myInfo'}"
      >
        <Avatar :src="userInfo.HeadPhoto" />
        <div
          class="info"
        >
          <h2 class="name">
            {{ userInfo.RealName }}
          </h2>
          <h5 class="phone">
            {{ userInfo.UserName }}
          </h5>
          <!-- <div class="study-time">
            累计学习：{{ LearnHours }} 小时
          </div> -->
        </div>
        <van-icon name="arrow" />
      </router-link>
      <ul class="my-entry-list">
        <router-link
          class="my-entry"
          :to="{name: 'changePwd'}"
          tag="li"
        >
          <span class="entry-name">
            修改密码
          </span>
          <van-icon name="arrow" />
        </router-link>
        <router-link
          class="my-entry"
          :to="{name: 'myClass'}"
          tag="li"
        >
          <span class="entry-name">
            我的订单
          </span>
          <van-icon name="arrow" />
        </router-link>
        <!-- <router-link
          class="my-entry"
          :to="{name: 'myWrong'}"
          tag="li"
        >
          <span class="entry-name">
            我的错题
          </span>
          <van-icon name="arrow" />
        </router-link> -->
      </ul>
      <ul class="my-entry-list">
        <!-- <router-link
          class="my-entry"
          :to="{name: 'myMoreInfo'}"
          tag="li"
        >
          <span class="entry-name">
            报名信息
          </span>
          <van-icon name="arrow" />
        </router-link> -->
        <!-- <a
          :href="ContactPhone ? 'tel://' + ContactPhone : 'javascript:void(0)'"
        >
          <img
            src="~assets/home/phone.png"
            class="entrance-img"
          >
          <span class="entrance-text">
            联系方式
          </span>
        </a> -->
        <li class="my-entry">
          <a
            class="entry-name"
            :href="ContactPhone ? 'tel://' + ContactPhone : 'javascript:void(0)'"
          >
            联系我们
          </a>
          <van-icon name="arrow" />
        </li>
        <router-link
          class="my-entry"
          :to="{name: 'aboutUs'}"
          tag="li"
        >
          <span class="entry-name">
            关于
          </span>
          <van-icon name="arrow" />
        </router-link>
      </ul>
      <div
        class="logout"
        @click="onLogout"
      >
        退出登录
      </div>
    </div>
    <div v-if="isShowCrop">
      <CropImage
        :img-data="headImgFile"
        @isCropFinished="onShowCrop"
      />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'
import { Uploader } from 'vant'
import { USER_LOGOUT, SET_USER_INFO } from '@/store/mutations'
import store from '@/store/store'
export default Vue.extend({
  components: {
    // 'van-uploader': Uploader,
    CropImage: () => import('components/Mine/UploadPicture.vue'),
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  data () {
    let Mobile = this.$store.state.userInfo.Phone
    return {
      headImgFile: '', // 上传图片的文件
      isShowCrop: false, // 是否显示裁剪层
      LearnHours: '',
      userPhone: Mobile.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3'),
      ContactPhone: '800-800-800',
    }
  },
  computed: mapState(['userInfo']),
  created () {
    (this.$root.$children[0] as any).active = 3
    this.getLearnHours()
    this.getUserInformation()
  },
  methods: {
    onLogout () {
      this.$dialog.confirm({
        message: '确定要退出登录吗？',
      }).then(() => {
        this.$store.commit(USER_LOGOUT)
        this.$router.replace({ name: 'home' });
        (this.$root.$children[0] as any).active = 0
      })
    },
    getLearnHours () {
      // this.$axios({
      //   method: 'get',
      //   url: 'UserCenter/GetLearnCurvesBySchoolId',
      // }).then(res => {
      //   this.LearnHours = res.LearningDuration
      // })
      this.LearnHours = '0.00'
    },
    getUserInformation () {
      // this.$axios({
      //   method: 'get',
      //   url: 'User/Profile',
      // }).then(res => {
      //   this.$store.commit(SET_USER_INFO, {
      //     PicUrl: res.HeadImgUrl,
      //     Phone: res.Phone,
      //     RealName: res.RealName,
      //   })
      // })
    },

    overSize () {
      this.$toast('请上传大小不超过3M的图片！')
    },
    onRead (file: any) {
      this.headImgFile = file.content
      this.isShowCrop = true
    },
    onShowCrop (val: any) {
      this.isShowCrop = val
      if (val) {
        this.isShowCrop = false
        // this.$toast('更新成功！')
      }
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  overflow: visible;
}
.header {
  display: flex;
  align-items: center;
  height: 280px;
  background: url('~assets/mine/mime-bg.png') 50% 50%/cover;
  color: #fff;
  padding: 0 40px;
  .van-icon-arrow {
    font-size: 24px;
  }
}
.info {
  flex: 1;
  padding: 0 28px;
}
.name {
  font-size: 34px;
  margin-bottom: 12px;
  width: 450px;
  @include ellipsis;
}
.phone {
  font-size: 30px;
  margin-bottom: 29px;
}
.study-time {
  font-size: 24px;
}
.my-entry-list {
  background: #fff;
  padding-left: 40px;
  + .my-entry-list {
    margin-top: 10px;
  }
}
.my-entry {
  display: flex;
  align-items: center;
  padding-right: 36px;
  height: 109px;
  color: #333;
  + .my-entry {
    // border-top: 1px solid #e1e1e1;
    @include px1border(top, #e1e1e1)
  }
  .van-icon-arrow {
    font-size: 24px;
  }
  a {
    color: #333;
  }
}
.entry-name {
  flex: 1;
  font-size: 30px;
}
.logout {
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 32px;
  color: $primary-web;
  background: #fff;
  margin: 20px 0;
}
</style>
